<template>
  <view class="content">
    <!-- 轮播图区域 -->
    <swiper class="screen-swiper" style="height: 650rpx;" :class="dotStyle?'square-dot':'round-dot'" 
            :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" 
               objectFit="cover" v-if="item.type=='video'"></video>
      </swiper-item>
    </swiper>
    
    <!-- items区域现在放在轮播图上方 -->
    <view class="items-overlay">
      <!-- 标题和切换按钮 -->
      <view class="text-white text-lg site_title">本地官方认证-全国托运中心</view>
      <view class="switch-container">
        <view class="switch-box">
          <view
            class="switch-item"
            v-for="(item, index) in type_list"
            :key="item.type"
            :class="{ active: selectedType === item.type }"
            @click="handleTypeChange(item.type)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      
      <!-- 分类内容区域 -->
      <view class="items">
        <!-- 分类导航栏 -->
        <scroll-view class="nav-scroll" scroll-x="true" :scroll-left="scrollLeft" show-scrollbar="false">
          <view class="nav-bar">
            <view
              v-for="item in navList"
              :key="item.id"
              class="nav-item"
              :class="{ active: currentNavId === item.id }"
              @click="handleNavChange(item.id)">
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
      
        <!-- 子分类内容区域 -->
        <view class="sub-category-wrap">
          <view
            class="sub-category-card"
            v-for="item in categoryList"
            :key="item.id"
            @click="handleSubCategorySelect(item.id)"
          >
            <image class="card-image" :src="item.image" mode="aspectFit" />
            <view class="card-title">{{ item.name }}</view>
      
            <!-- 选中标记 -->
            <view class="selected-icon" v-if="selectedSubId === item.id">
              <text>✔</text>
            </view>
          </view>
        </view>
      
        <!-- 简介区域 -->
        <view class="intro-area" v-if="selectedSubId">
          {{ getCurrentIntro() }}
        </view>
      </view>
	  
	  <view class="items">
	    <!-- 第一项 -->
	     <!-- 装货信息 -->
		<view @click="goToAddress('from')" class="flex align-center margin-bottom-xs">
		  <view class="circle-badge margin-right bg-black">装</view>
		  <view class="text-grey padding-bottom-xs">
			<view>{{ fromInfo.phone || '请输入手机号' }}</view>
			<view>{{ fromInfo.full || '请输入装货地址' }}</view>
		  </view>
		</view>
	  
	    <!-- 中间横线，只在文字宽度内 -->
	    <view class="line-inset"></view>
	  
	    <!-- 第二项 -->
	    <!-- 卸货信息 -->
		<view @click="goToAddress('to')" class="flex align-center margin-top-sm">
		  <view class="circle-badge margin-right bg-blue">卸</view>
		  <view class="text-grey padding-bottom-xs">
			<view>{{ toInfo.phone || '请输入手机号' }}</view>
			<view>{{ toInfo.full || '输入卸货地查价下单' }}</view>
		  </view>
		</view>
	  </view>
	  
	  <!-- 服务栏区域 -->
	  <view class="service-bar margin-lr bg-light-blue radius padding">
	    <view class="flex justify-between align-center text-blue text-sm" style="height: 80rpx;">
	      <view class="flex align-center">
	        <text class="cuIcon-safe text-lg icon-middle margin-right-xs"></text>
	        <text>免费保障</text>
	      </view>
	      <text class="dot">·</text>
	      <view class="flex align-center">
	        <text class="cuIcon-service icon-middle text-lg margin-right-xs"></text>
	        <text>一对一服务</text>
	      </view>
	      <text class="dot">·</text>
	      <view class="flex align-center">
	        <text class="cuIcon-deliver icon-middle text-lg margin-right-xs"></text>
	        <text>上门取车</text>
	      </view>
	    </view>
	  </view>
	  
	  <!-- 客服电话 -->
	  <view class="hotline-box" @tap="makecallPhone">
	    <image class="hotline-avatar" src="/static/images/customer_left2.png" mode="aspectFit"></image>
	  
	    <view class="hotline-content">
	      <text class="hotline-label margin-bottom-xs">客服电话</text>
	      <text class="hotline-number">{{phoneNumber}}</text>
	    </view>
	  
	    <image class="hotline-phone" src="/static/images/icon-phone.png" mode="aspectFit"></image>
	  </view>
	
	<!-- 评价和问题 -->
	 <view class="items" style="padding-top: 0;padding-left: 0;padding-right: 0;">
	      <!-- Tabs -->
	      <view class="tab-header flex justify-around bg-light radius-lg overflow-hidden margin-bottom">
	        <view
	          class="tab-item"
	          :class="{ 'active': activeTab === 'comment' }"
	          @click="activeTab = 'comment'"
	        >
	          用户评价（999+）
	        </view>
	        <view
	          class="tab-item"
	          :class="{ 'active': activeTab === 'faq' }"
	          @click="activeTab = 'faq'"
	        >
	          常见问题
	        </view>
	      </view>
	  
	      <!-- 内容区域 -->
	      <view class="content-area bg-white radius-lg padding-sm">
	        <!-- 用户评价 -->
	        <view v-if="activeTab === 'comment'">
	          <view class="comment-item flex margin-bottom-sm padding-lr-sm" v-for="(item, index) in commentList" :key="index">
	            <image :src="item.avatar" mode="aspectFill" class="avatar margin-right-sm" />
	            <view class="flex-1" style="flex: 1;">
	              <view class="flex justify-between margin-bottom-xs" style="width: 100%;">
	                <view class="text-df">{{item.name}}</view>
	                <view class="text-orange text-right">
	                  <text v-for="i in 5" :key="i">
	                    <text v-if="i <= item.rating">★</text>
	                    <text v-else class="text-gray">☆</text>
	                  </text>
	                </view>
	              </view>
	              <view class="text-base">{{ item.comment }}</view>
	            </view>
	          </view>
	        </view>
	  
	        <!-- 常见问题 -->
	        <view v-else>
	          <view class="faq-item margin-bottom" v-for="(item, index) in faqList" :key="index">
	            <view class="qa-item padding-sm margin-bottom-sm">
	              <view class="flex margin-bottom-sm">
	                <view class="qa-tag q">Q</view>
	                <view class="text-df flex-1">{{ item.question }}</view>
	              </view>
	              <view class="flex">
	                <view class="qa-tag a">A</view>
	                <view class="text-base flex-1 text-gray">{{ item.answer }}</view>
	              </view>
	            </view>
	          </view>
	        </view>
	      </view>
	 </view>
	
	<!-- 荣誉区域 -->
	<view class="honor-area">
	  <view class="gradient-items">
	    <view class="flex justify-between gradient-inner">
	      <view class="text-white">
	        <view class="title">万易航运车</view>
	        <view class="subtitle">286城千万用户的放心选择</view>
	      </view>
	      <view>
	        <image src="/static/images/gold.png" mode="aspectFit" class="phone-image" />
	      </view>
	    </view>
	  </view>
	  <view class="padding" style="margin-top: -70rpx;z-index: 2;">
	    <scroll-view scroll-x class="honor-scroll" scroll-with-animation>
	      <view class="honor-card" v-for="(item, index) in honorList" :key="index">
	        <image :src="item.image" mode="aspectFill" class="honor-image" />
	        <view class="honor-title">{{ item.title }}</view>
	      </view>
	    </scroll-view>
	  </view>
	</view>
	
	
	<view style="height: 100rpx;"> </view>
    </view>
	
	
	<!-- 在线客服按钮 -->
	<view class="online-service">
	  <image src="/static/images/kefu.png" class="service-icon" mode="aspectFit"></image>
	  <view class="service-text">
	    <text class="line1">在线</text>
	    <text class="line2">客服</text>
	  </view>
	</view>
	
  </view>
</template>


<script>
import { getUserInfo, login } from '@/api/user.js';

export default {
  data() {
    return {
      selectedType: 1, //1 运车 2搬家
      type_list: [
        { type: 1, name: '运车' },
        { type: 2, name: '搬家' }
      ],
	   phoneNumber: '40000132320',
      swiperList: [
        {
          id: 0,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
        }, {
          id: 1,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
        }, {
          id: 2,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
        }, {
          id: 3,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
        }
      ],
      dotStyle: true,
      navList: [
        { id: 1, name: '电动车' },
        { id: 2, name: '摩托车' },
        { id: 3, name: '三轮车' },
        { id: 4, name: '折叠/自行车' },
        { id: 5, name: '电池' },
        { id: 6, name: '电动车配件' },
        { id: 7, name: '摩托车配件' },
        { id: 8, name: '维修工具' }
      ],
      currentNavId: 1,
      selectedSubId: 101,
      scrollLeft: 0,
	  currentAddressType:"form",
	  fromInfo: {},
		toInfo: {},
		currentType: '',
      // 标准数组结构
      categoryList: [
        {
          id: 101,
          name: '国标电动车',
          image: '/static/images/ddc.png',
          intro: '国标电动车适合市区短途通勤...'
        },
        {
          id: 102,
          name: '踏板电动车',
          image: '/static/images/ddc.png',
          intro: '踏板电动车骑行舒适，操作便捷...'
        },
        {
          id: 103,
          name: '载人小三轮',
          image: '/static/images/ddc.png',
          intro: '载人小三轮适合家庭出行使用...'
        }
      ],
	    activeTab: 'comment',
	    commentList: [
			{
			  avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg', // 可替换为真实头像
			  name:'AAA小哥',
			  rating: 4,
			  comment: '车辆整洁，司机准时，非常满意！'
			},
			{
			  avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
			   name:'电车跑全全国',
			  rating: 5,
			  comment: '服务态度很好，送达速度快。'
			}
		  ],
		 faqList: [
			  {
				question: '下单后多久可以发车？',
				answer: '一般下单成功后，平台会在30分钟内安排车辆。'
			  },
			  {
				question: '可以选择具体车型吗？',
				answer: '可选择车型类别，具体车辆将由平台调度安排。'
			  }
			],
		 honorList: [
			  { image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg', title: '荣誉证书一荣誉证书一荣誉证书一' },
			  { image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg', title: '荣誉证书二' },
			  { image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg', title: '荣誉证书三' },
			  { image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg', title: '荣誉证书4' },
			  { image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg', title: '荣誉证书5' },
			]
    }
  },
  onLoad() {
      uni.$on('addressConfirmed', this.handleAddressConfirmed)
  },
   onUnload() {
      // 页面卸载时解绑
      uni.$off('addressConfirmed', this.handleAddressConfirmed)
    },
  methods: {
    // 切换类型 (运车/搬家)
    handleTypeChange(type) {
      this.selectedType = type;
      // 这里可以添加类型切换后的逻辑
    },
     goToAddress(type) {
         this.currentType = type
         uni.navigateTo({
           url: '/pages/map/address-picker?type=' + type
         })
       },
	 handleAddressConfirmed(data) {
	      if (this.currentType === 'from') {
	        this.fromInfo = data
	      } else if (this.currentType === 'to') {
	        this.toInfo = data
	      }
	    },
    // 切换导航分类
    handleNavChange(navId) {
      this.currentNavId = navId;
      this.selectedSubId = null; // 清空选中状态
      
      // 计算滚动位置，使当前选中项尽量居中
      const index = this.navList.findIndex(item => item.id === navId);
      this.scrollLeft = (index - 2) * 120; // 120是每个导航项的预估宽度
      
      // 这里可以调用接口获取新数据
      // this.getCategoryData(navId);
    },
    
    // 选择子分类
    handleSubCategorySelect(subId) {
      this.selectedSubId = subId;
      // 这里可以添加获取详情的逻辑
    },
    
    // 获取当前选中的介绍
    getCurrentIntro() {
      if (!this.selectedSubId) return '';
      const item = this.categoryList.find(item => item.id === this.selectedSubId);
      return item ? item.intro : '暂无介绍';
    },
	makecallPhone() {
	  uni.makePhoneCall({
		phoneNumber: this.phoneNumber,
		fail: (err) => {
		  console.error('拨打失败：', err);
		  uni.showToast({
			title: '拨号失败',
			icon: 'none'
		  });
		}
	  })
	},
	  goToComment() {
	    // 跳转用户评价页面
	    uni.navigateTo({
	      url: '/pages/comment/index'
	    });
	  },
	  goToFaq() {
	    // 跳转常见问题页面
	    uni.navigateTo({
	      url: '/pages/faq/index'
	    });
	  }
  }
}
</script>

<style scoped lang="scss">
page {
  position: relative;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 轮播图容器 */
.screen-swiper {
  position: relative;
  height: 650rpx !important;
}

/* 覆盖层容器（包含items区域） */
.items-overlay {
  position: absolute;
  top: 400rpx;
  left: 0;
  right: 0;
  z-index: 10;
}

/* 站点标题 */
.site_title {
  position: absolute;
  top: -350rpx;
  left: 30rpx;
  z-index: 11;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  text-shadow: 1rpx 1rpx 3rpx rgba(0, 0, 0, 0.5);
}

/* 切换按钮容器 */
.switch-container {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 30rpx;
  top: -280rpx;
  z-index: 11;
}

.switch-box {
  background-color: #ffffff;
  border-radius: 50rpx;
  padding: 8rpx;
  display: flex;
  width: 320rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.switch-item {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
  font-size: 28rpx;
  border-radius: 40rpx;
  color: #000000;
  transition: all 0.3s;
  margin: 2rpx;
}

.switch-item.active {
  background-color: #007aff;
  color: #ffffff;
}

/* 主内容区域 */
.items {
  background-color: #ffffff;
  margin: 30rpx;
  padding: 25rpx 20rpx; /* 左右padding减小 */
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

/* 导航栏滚动容器 */
.nav-scroll {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10rpx;
}

.nav-bar {
  display: inline-block;
  padding-right: 30rpx;
}

.nav-item {
  display: inline-block;
  padding: 0 28rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  color: #666;
  text-align: center;
  transition: color 0.3s;
}

.nav-item.active {
  color: #007aff;
  font-weight: bold;
}

/* 子分类容器 */
.sub-category-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 15rpx;
  padding: 0 10rpx; /* 增加左右内边距 */
}

/* 子分类卡片 - 修改为正方形 */
.sub-category-card {
  width: 30%; /* 宽度微调 */
  aspect-ratio: 1/1; /* 关键：保持宽高比1:1 */
  margin-bottom: 22rpx;
  position: relative;
  border-radius: 16rpx;
  overflow: hidden;
  border: 1rpx solid rgb(8,88,211); /* 更柔和的蓝色 */
  background-color: rgb(238, 243, 255); /* 更浅的背景色 */
  box-shadow: 0 2rpx 12rpx rgba(102, 163, 255, 0.15); /* 柔和的蓝色阴影 */
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.sub-category-card:active {
  transform: scale(0.98);
  box-shadow: 0 1rpx 6rpx rgba(102, 163, 255, 0.25);
}

.card-image {
  width: 100%;
  flex: 1; /* 图片区域自适应 */
  display: block;
  background-color: #f8f8f8;
}

.card-title {
  padding: 16rpx 10rpx;
  font-size: 26rpx;
  text-align: center;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 选中标记 */
.selected-icon {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #66a3ff; /* 柔和的蓝色 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24rpx;
  border: 1rpx solid #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
}

/* 简介区域 */
.intro-area {
  margin-top: 35rpx;
  padding: 25rpx;
  background-color: #f9f9f9;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  border-left: 4rpx solid #66a3ff; /* 柔和的蓝色 */
}

/* 响应式调整 */
@media (max-width: 360px) {
  .sub-category-card {
    width: 48%;
  }
  
  .nav-item {
    padding: 0 20rpx;
    font-size: 28rpx;
  }
  
  .items {
    margin: 30rpx 20rpx; /* 小屏幕减少左右外边距 */
  }
}

.circle-badge {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  font-size: 24rpx;
}

.line-inset {
  margin-left: 64rpx; /* 和左侧图标 + margin-right 对齐 */
  height: 1px;
  background-color: #e5e5e5;
  width: 100%;
}
.service-bar {
  background-color: #f5f9ff;
  border-radius: 16rpx;
  padding: 10rpx 24rpx;
  margin: 24rpx 24rpx; /* 等价于 margin-lr，如果你统一使用 class 就用 class 替代 */
}

.dot {
  margin: 0 16rpx;
}
.icon-middle {
  vertical-align: middle;
  line-height: 1;
}
.hotline-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #f5f9ff;
  padding: 20rpx;
  border-radius: 20rpx;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  margin: 30rpx;
}

.hotline-avatar {
  width: 100rpx;
  height: 100rpx;
  flex-shrink: 0;
  margin-right: 40rpx;
}

.hotline-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
}

.hotline-label {
  font-size: 26rpx;
  color: #333;
}

.hotline-number {
  font-size: 40rpx;
  color: #ff6600;
  font-weight: bold;
}

.hotline-phone {
  width: 60rpx;
  height: 60rpx;
  flex-shrink: 0;
  margin-right: 20rpx;
}



.tab-header {
  background-color: #e0e0e0;
  border-radius: 16rpx;
  border-bottom-right-radius: 0;
  overflow: hidden;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  background-color: rgb(239,243,247);
  font-weight: bold;
  color: #555;
}

.tab-item.active {
  background-color: #fff;
  color: #000;

}

.content-area {
  background-color: #fff;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  object-fit: cover;
}

.comment-item {
  align-items: flex-start;
  border-bottom: 1px solid #eee;
  padding-bottom: 25rpx;
  padding-top: 20rpx;
}

.faq-item {
  border-bottom: 1px solid #eee;
  
}


.qa-tag {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  border-radius: 8rpx;
  color: #fff;
  font-weight: bold;
  margin-right: 16rpx;
  font-size: 24rpx;
}

.qa-tag.q {
  background-color: #0081ff; /* 蓝色 */
}

.qa-tag.a {
  background-color: #ff6600; /* 橙色 */
}
.gradient-items {
  background: linear-gradient(to right, rgb(255,155,73), rgb(255,197,147));
  border-radius: 20rpx;
  overflow: hidden;
  padding: 30rpx;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 1;
}

.gradient-inner {
  width: 100%;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.subtitle {
  font-size: 26rpx;
}

.phone-image {
  width: 120rpx;
  height: 120rpx;
}
/* 荣誉区域 */
.honor-area {
  background-color: #ffffff;
  margin: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  overflow: hidden; /* 新增 */
}

.honor-scroll {
  white-space: nowrap;
  width: 100%;

  height: 340rpx; /* 固定高度，确保所有卡片对齐 */
}

.honor-card {
  display: inline-flex; /* 改为flex布局 */
  flex-direction: column;
  width: 280rpx; /* 稍微减小宽度，确保能显示部分第三个 */
  height: 300rpx; /* 固定高度 */
  margin-right: 20rpx;
  background-color: #fff;
  border: 2rpx solid #ff9b49;
  border-radius: 20rpx;
  padding: 10rpx;
  box-sizing: border-box;
  vertical-align: top; /* 关键：确保顶部对齐 */
  position: relative;

}



/* 最后一个卡片右边距 */
.honor-card:last-child {
  margin-right: 30rpx;
}

.honor-image {
  width: 100%;
  height: 160rpx; /* 固定图片高度 */
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  object-fit: cover; /* 确保图片比例不变形 */
}

.honor-title {
  flex: 1; /* 剩余空间给标题 */
  font-size: 26rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: normal; /* 允许换行 */
}

.online-service {
  position: fixed;
  bottom: 380rpx; /* 距离底部位置可根据需要调整 */
  right: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 15rpx 30rpx;
  padding-right: 20rpx;
  padding-left: 10rpx;
  border-top-left-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
  z-index: 999;
  color: #000;
}

.service-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}

.service-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 24rpx;
  line-height: 1.3;
}

.line1,
.line2 {
  text-align: center;
}


</style>